import React from 'react'
import Tab from './common/Tab'

const Home = () => {
    // 定义状态
    const [NewProductData, setNewProductData] = React.useState([])
    const [ProductData, setProductData] = React.useState([])
    const [CategoryData, setCategoryData] = React.useState([])

    const getHomeData = async () => {
        let result = await React.$Api.home()
        // console.log(result);
        if (result.code === 1) {
            let data = result.data

            setNewProductData(data.NewProductData)
            setProductData(data.ProductData)
            setCategoryData(data.CategoryData)
        }
    }

    React.useEffect(() => {
        getHomeData()
    }, [])

    //顶部轮播新品
    const NewProduct = () => {
        return (
            <React.$Vant.Swiper autoplay={1000}>
                {NewProductData.map((item, index) => {
                    return (
                        <React.$Vant.Swiper.Item key={index}>
                            <React.$Router.NavLink to={`/product/product/info?proid=${item.id}`}>
                                <img src={item.cover_cdn} style={{ height: '220px', objectFit: 'cover' }} />
                            </React.$Router.NavLink>
                        </React.$Vant.Swiper.Item>
                    )
                })}
            </React.$Vant.Swiper>
        )
    }

    // 中部轮播推荐
    const Product = () => {
        return (
            <React.$Vant.Swiper autoplay={1000} >
                {ProductData.map((item, index) => {
                    return (
                        <React.$Vant.Swiper.Item key={index}>
                            <React.$Router.NavLink to={`/product/product/info?proid=${item.id}`} className="a_blok">
                                <img src={item.cover_cdn} alt="" />
                                <span>查看详情</span>
                            </React.$Router.NavLink>
                        </React.$Vant.Swiper.Item>
                    )
                })}
            </React.$Vant.Swiper>
        )
    }

    // 文章列表
    const Category = () => {
        return CategoryData.map((item, index) => {
            return (
                <li key={index}>
                    <React.$Router.NavLink to={"/category/category/info?id=" + item.id}>
                        <img src={item.image_cdn} alt="" />
                        <p>{item.name}</p>
                        <span>{item.createtime_text}</span>
                    </React.$Router.NavLink>
                </li>
            )
        })
    }

    return (
        <>
            {/* 轮播图 */}
            <div className="banner_shouy">
                <NewProduct />
            </div>

            {/* 导航 */}
            <div className="shouye_kuanj">
                <div className="swiper-wrapper" style={{ justifyContent: 'center' }}>
                    <div className="swiper-slide">
                        <React.$Router.NavLink to={'/lease/lease/add'}>
                            <img src="/assets/images/kj.png" alt="" />
                            <p>产品租赁</p>
                        </React.$Router.NavLink>
                    </div>
                    <div className="swiper-slide">
                        <React.$Router.NavLink to={'/recovery/recovery/index'}>
                            <img src="/assets/images/kj1.png" alt="" />
                            <p>我要归还</p>
                        </React.$Router.NavLink>
                    </div>
                    <div className="swiper-slide">
                        <React.$Router.NavLink to={"product/product/index?action=all"}>
                            <img src="/assets/images/kj2.png" alt="" />
                            <p>商品大全</p>
                        </React.$Router.NavLink>
                    </div>
                    <div className="swiper-slide">
                        <React.$Router.NavLink to={'/business/about'}>
                            <img src="/assets/images/kj3.png" alt="" />
                            <p>关于我们</p>
                        </React.$Router.NavLink>
                    </div>
                    {/* <div className="swiper-slide">
                        <a href="#">
                            <img src="/assets/images/kj.png" alt="" />
                            <p>备用</p>
                        </a>
                    </div> */}
                </div>
            </div>

            {/* 产品中心 */}
            <div className="chan_p_center">
                {/* <!-- 产品 --> */}
                <div className="chanp_k_sy">
                    <div className="sjpiue_chanp_list">
                        <Product />
                    </div>
                </div>

                <div className="list_color" >
                    <h3>学术文章</h3>
                    <ul>
                        <Category />
                    </ul>
                </div>
            </div>

            <div style={{ height: '.75rem' }}></div>

            {/* 底部导航 */}
            <Tab />
        </>
    )
}

export default Home